<template>
  <div class="national-standard-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="min-width: 1100px">
      <el-tab-pane v-if="hasSubscription" label="订阅项目" name="subscription">
        <div class="activity-ticker">
          <div
            class="small-cards"
            v-for="(item, idx) in subscriptionProjects"
            :key="idx"
            @click="handleSubscriptionClick(item, idx)"
            :class="{ 'small-cards-active': activeSubscriptionIndex === idx }"
          >
            <span class="small-cards_name">{{ item.name }}</span>
            <el-icon @click.stop="handleEditClick(item)" style="float: right; cursor: pointer">
              <Edit />
            </el-icon>
          </div>
          <div class="small-cards" @click="handleCardClickAdd">
            <el-icon><Plus /></el-icon>
          </div>
        </div>
        <div class="search-class">
          <el-input size="large" style="width: 650px" placeholder="请输入产品或业务关键词" class="input-with-select">
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <div class="filter-item">
            <div class="filter-title">标讯类型</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in bidTypes"
                :key="index"
                class="text-option"
                :class="{ active: isBidTypeSelected(option) }"
                @click="toggleBidTypeSelection(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
            </div>
          </div>
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent" :class="{ 'show-all': showAllAreas }">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                  <span v-if="province.selected && province.selectedCnt > 0" class="count">
                    {{ province.selectedCnt }}
                    <el-icon @click.stop="handleProvinceClick(province)"><Close /></el-icon>
                  </span>
                </div>
                <div v-if="needShowMore" class="show-more" @click="toggleShowAllAreas">
                  {{ showAllAreas ? '收起' : '更多' }}
                  <el-icon>
                    <component :is="showAllAreas ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部标讯" name="all">
        <div v-if="!hasSubscription" class="activity-ticker">
          <div class="subscribe-now" @click="handleCardClickAdd">
            <el-icon><Plus /></el-icon>
            <span>立即订阅</span>
          </div>
        </div>
        <div class="search-class">
          <el-input
            size="large"
            style="width: 650px"
            placeholder="请输入项目名称、关键词，多关键词用空格隔开，如大数据 招标"
            class="input-with-select"
          >
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 发布时间筛选 -->
          <div class="filter-item">
            <div class="filter-title">发布时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 高级筛选 -->
          <div class="filter-item">
            <div class="filter-title">高级筛选</div>
            <div class="filter-content">
              <div class="text-option" :class="{ active: advancedFilter.includeWords }" @click="showIncludeWordsDialog = true">
                <div class="text">包含词</div>
                <span class="filter-tag">
                  {{ advancedFilter.includeWords ? `已设置${(advancedFilter.includeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
              <div class="text-option" :class="{ active: advancedFilter.excludeWords }" @click="showExcludeWordsDialog = true">
                <div class="text">排除词</div>
                <span class="filter-tag">
                  {{ advancedFilter.excludeWords ? `已设置${(advancedFilter.excludeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item">
            <div class="filter-title">更多筛选</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onBidStageClick">
                <div class="text">招标阶段</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidStageOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidStageOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidStageOption === option }"
                    @click="onBidStageOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidStageOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">匹配方式</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onBidAmountClick">
                <div class="text">中标金额</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidAmountOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidAmountOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidAmountOption === option }"
                    @click="onBidAmountOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidAmountOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部企业" name="enterprise">
        <div class="search-class">
          <el-input size="large" style="width: 650px" placeholder="请输入企业名称" class="input-with-select">
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 组织类型 -->
          <div class="filter-item">
            <div class="filter-title">组织类型</div>
            <div class="filter-content">
              <div
                v-for="(type, index) in orgTypes"
                :key="index"
                class="text-option"
                :class="{ active: selectedOrgTypes.includes(type) }"
                @click="toggleOrgTypeSelection(type)"
              >
                <div class="text">{{ type }}</div>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item">
            <div class="filter-title">更多筛选</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onEmployeeClick">
                <div class="text">参保人数</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showEmployeeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in employeeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedEmployeeOption === option }"
                    @click="onEmployeeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedEmployeeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onEstablishClick">
                <div class="text">成立年限</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showEstablishOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in establishOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedEstablishOption === option }"
                    @click="onEstablishOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedEstablishOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onStatusClick">
                <div class="text">登记状态</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showStatusOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in statusOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedStatusOption === option }"
                    @click="onStatusOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedStatusOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onRegCapitalClick">
                <div class="text">注册资本</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showRegCapitalOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in regCapitalOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedRegCapitalOption === option }"
                    @click="onRegCapitalOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedRegCapitalOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onPaidCapitalClick">
                <div class="text">实缴资本</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showPaidCapitalOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in paidCapitalOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedPaidCapitalOption === option }"
                    @click="onPaidCapitalOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedPaidCapitalOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="招标公告" name="notice">
        <div class="search-class">
          <el-input
            size="large"
            style="width: 650px"
            placeholder="请输入项目名称、关键词，多关键词用空格隔开，如大数据 招标"
            class="input-with-select"
          >
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 发布时间筛选 -->
          <div class="filter-item">
            <div class="filter-title">发布时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 高级筛选 -->
          <div class="filter-item">
            <div class="filter-title">高级筛选</div>
            <div class="filter-content">
              <div class="text-option" :class="{ active: advancedFilter.includeWords }" @click="showIncludeWordsDialog = true">
                <div class="text">包含词</div>
                <span class="filter-tag">
                  {{ advancedFilter.includeWords ? `已设置${(advancedFilter.includeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
              <div class="text-option" :class="{ active: advancedFilter.excludeWords }" @click="showExcludeWordsDialog = true">
                <div class="text">排除词</div>
                <span class="filter-tag">
                  {{ advancedFilter.excludeWords ? `已设置${(advancedFilter.excludeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item">
            <div class="filter-title">更多筛选</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onBidStageClick">
                <div class="text">招标阶段</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidStageOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidStageOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidStageOption === option }"
                    @click="onBidStageOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidStageOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">匹配方式</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onBidAmountClick">
                <div class="text">中标金额</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidAmountOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidAmountOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidAmountOption === option }"
                    @click="onBidAmountOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidAmountOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中标结果" name="result">
        <div class="search-class">
          <el-input
            size="large"
            style="width: 650px"
            placeholder="请输入项目名称、关键词，多关键词用空格隔开，如大数据 招标"
            class="input-with-select"
          >
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 发布时间筛选 -->
          <div class="filter-item">
            <div class="filter-title">发布时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 高级筛选 -->
          <div class="filter-item">
            <div class="filter-title">高级筛选</div>
            <div class="filter-content">
              <div class="text-option" :class="{ active: advancedFilter.includeWords }" @click="showIncludeWordsDialog = true">
                <div class="text">包含词</div>
                <span class="filter-tag">
                  {{ advancedFilter.includeWords ? `已设置${(advancedFilter.includeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
              <div class="text-option" :class="{ active: advancedFilter.excludeWords }" @click="showExcludeWordsDialog = true">
                <div class="text">排除词</div>
                <span class="filter-tag">
                  {{ advancedFilter.excludeWords ? `已设置${(advancedFilter.excludeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item">
            <div class="filter-title">更多筛选</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onBidStageClick">
                <div class="text">中标阶段</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidStageOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidStageOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidStageOption === option }"
                    @click="onBidStageOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidStageOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">匹配方式</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onBidAmountClick">
                <div class="text">中标金额</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidAmountOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidAmountOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidAmountOption === option }"
                    @click="onBidAmountOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidAmountOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="超前商机" name="opportunity">
        <div class="search-class">
          <el-input size="large" style="width: 650px" placeholder="请输入产品或业务关键词" class="input-with-select">
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title" style="width: 90px">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 发布时间筛选 -->
          <div class="filter-item">
            <div class="filter-title" style="width: 90px">预采/到期时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 高级筛选 -->
          <div class="filter-item">
            <div class="filter-title" style="width: 90px">商机类型</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onStatusClick">
                <div class="text">采购意向</div>
              </div>
              <div class="text-option filter-dropdown" @click="onRegCapitalClick">
                <div class="text">合约商机</div>
              </div>
              <div class="text-option filter-dropdown" @click="onPaidCapitalClick">
                <div class="text">废标重招</div>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="采购意向" name="intention">
        <div class="search-class">
          <el-input
            size="large"
            style="width: 650px"
            placeholder="请输入项目名称、关键词，多关键词用空格隔开，如大数据 招标"
            class="input-with-select"
          >
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="subscribe-filter">
          <!-- 发布时间筛选 -->
          <div class="filter-item">
            <div class="filter-title">预采时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="filter-item">
            <div class="filter-title">发布时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 高级筛选 -->
          <div class="filter-item">
            <div class="filter-title">高级筛选</div>
            <div class="filter-content">
              <div class="text-option" :class="{ active: advancedFilter.includeWords }" @click="showIncludeWordsDialog = true">
                <div class="text">包含词</div>
                <span class="filter-tag">
                  {{ advancedFilter.includeWords ? `已设置${(advancedFilter.includeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
              <div class="text-option" :class="{ active: advancedFilter.excludeWords }" @click="showExcludeWordsDialog = true">
                <div class="text">排除词</div>
                <span class="filter-tag">
                  {{ advancedFilter.excludeWords ? `已设置${(advancedFilter.excludeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item">
            <div class="filter-title">更多筛选</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">匹配方式</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onBidAmountClick">
                <div class="text">预算金额</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidAmountOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidAmountOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidAmountOption === option }"
                    @click="onBidAmountOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidAmountOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="拟建项目" name="planned">
        <div class="search-class">
          <el-input
            size="large"
            style="width: 650px"
            placeholder="请输入项目名称、关键词，多关键词用空格隔开，如大数据 招标"
            class="input-with-select"
          >
            <template #append>
              <el-button style="background-color: #0052d9; border-color: #0052d9; color: white">搜索</el-button>
            </template>
          </el-input>
        </div>

        <div class="subscribe-filter">
          <!-- 省份地区筛选 -->
          <div class="filter-item">
            <div class="filter-title">省份地区</div>
            <div class="area-selector">
              <div class="filter-content" ref="areaContent">
                <div
                  v-for="(province, index) in provinceAreas"
                  :key="province.id"
                  class="text-option"
                  :class="{ active: province.selected }"
                  @click="handleProvinceClick(province)"
                >
                  <div class="text">{{ province.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="filter-item">
            <div class="filter-title">发布时间</div>
            <div class="filter-content">
              <div
                v-for="(option, index) in publishTimeOptions"
                :key="index"
                class="text-option"
                :class="{ active: selectedPublishTime === option }"
                @click="handlePublishTimeSelect(option)"
              >
                <div class="text">{{ option }}</div>
              </div>
              <div class="text-option custom-date" :class="{ active: selectedPublishTime === 'custom' }">
                <el-date-picker
                  v-model="customDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateRangeChange"
                  style="width: 240px"
                />
              </div>
            </div>
          </div>
          <!-- 高级筛选 -->
          <div class="filter-item">
            <div class="filter-title">高级筛选</div>
            <div class="filter-content">
              <div class="text-option" :class="{ active: advancedFilter.includeWords }" @click="showIncludeWordsDialog = true">
                <div class="text">包含词</div>
                <span class="filter-tag">
                  {{ advancedFilter.includeWords ? `已设置${(advancedFilter.includeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
              <div class="text-option" :class="{ active: advancedFilter.excludeWords }" @click="showExcludeWordsDialog = true">
                <div class="text">排除词</div>
                <span class="filter-tag">
                  {{ advancedFilter.excludeWords ? `已设置${(advancedFilter.excludeWords.split(' ') || []).length}/16` : '0/16' }}
                </span>
              </div>
            </div>
          </div>
          <!-- 更多筛选 -->
          <div class="filter-item">
            <div class="filter-title">更多筛选</div>
            <div class="filter-content">
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">匹配方式</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">项目阶段</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">业主类型</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onMatchingModeClick">
                <div class="text">行业分类</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showMatchingModeOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in matchingModeOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedMatchingModeOption === option }"
                    @click="onMatchingModeOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedMatchingModeOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
              <div class="text-option filter-dropdown" @click="onBidAmountClick">
                <div class="text">预算金额</div>
                <el-icon><ArrowDown /></el-icon>
                <div v-show="showBidAmountOptions" class="dropdown-options">
                  <div
                    v-for="(option, index) in bidAmountOptions"
                    :key="index"
                    class="dropdown-option"
                    :class="{ active: selectedBidAmountOption === option }"
                    @click="onBidAmountOptionClick(option)"
                  >
                    <div class="text">{{ option }}</div>
                    <el-icon v-if="selectedBidAmountOption === option"><Check /></el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="card-bottom">
    <!-- 列表信息 -->
    <el-card style="min-width: 1100px; border-left: 0; border-right: 0" shadow="never">
      <template #header>
        <div class="card-header">
          为您找到<span style="color: #f96702">{{ total > 300 ? '300+' : total }}</span
          >条结果
        </div>
      </template>
      <div class="bid-list">
        <div v-for="(item, index) in bidList" :key="index" class="bid-item" @click="handleBidItemClick(item)">
          <h3 class="bid-title">
            {{ item.title }}
            <div class="bid-actions">
              <el-icon class="action-icon" :class="{ 'active': item.isSchedule }" @click.stop="handleScheduleClick(item)">
                <Calendar />
              </el-icon>
              <el-icon class="action-icon" :class="{ 'active': item.isFollow }" @click.stop="handleFollowClick(item)">
                <Star />
              </el-icon>
            </div>
          </h3>
          <div class="bid-tags">
            <el-tag
              v-if="item.bidType"
              :style="{
                backgroundColor: item.bidType === '中标结果' ? '#FFF7E6' : '#EEF2F9',
                color: item.bidType === '中标结果' ? '#FF7B1C' : '#2680E1',
                border: 'none'
              }"
            >
              {{ item.bidType }}
            </el-tag>
            <el-tag
              v-if="item.subBidType"
              :style="{
                backgroundColor: item.subBidType === '中标' ? '#FFF7E6' : '#EEF2F9',
                color: item.subBidType === '中标' ? '#FF7B1C' : '#2680E1',
                border: 'none'
              }"
            >
              {{ item.subBidType }}
            </el-tag>
            <el-tag v-if="item.city" :style="{ backgroundColor: '#F4F6F8', color: '#666666', border: 'none' }">
              {{ item.city }}
            </el-tag>
            <el-tag v-if="item.winBidAmount" :style="{ backgroundColor: '#F4F6F8', color: '#666666', border: 'none' }">
              {{ item.winBidAmount }}
            </el-tag>
            <el-tag v-for="tag in item.tags" :key="tag.name" :style="{ backgroundColor: tag.backColor, color: tag.fontColor, border: 'none' }">
              {{ tag.name }}
            </el-tag>
          </div>
          <div class="bid-info">
            <div class="info-row">
              <div class="info-items">
                <div class="info-item">
                  <span class="label">采购单位</span>
                  <span class="value">{{ item.bidUnit?.name }}</span>
                </div>
                <div class="info-item" v-if="item.winBidUnit">
                  <span class="label">中标单位</span>
                  <span class="value">{{ item.winBidUnit.name }}</span>
                </div>
                <div class="info-item" v-if="item.tenderProducts">
                  <span class="label">产品信息</span>
                  <span class="value">{{ item.tenderProducts }}</span>
                </div>
              </div>
              <span v-if="!item.mainBody" class="publish-time">{{ item.publishTime }}</span>
            </div>
            <div v-if="item.mainBody" class="content-row">
              <span class="label">正文内容</span>
              <span class="value">{{ item.mainBody }}</span>
              <span class="publish-time">{{ item.publishTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>

  <!-- 自定义时间选择弹窗 -->
  <el-dialog v-model="showDatePicker" title="自定义时间" width="400px" :show-close="true" :close-on-click-modal="false">
    <div class="date-picker-content">
      <el-date-picker
        v-model="customDateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancelDate">取消</el-button>
        <el-button type="primary" @click="handleConfirmDate">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 包含词弹窗 -->
  <el-dialog
    v-model="showIncludeWordsDialog"
    title="包含词设置"
    width="480px"
    :show-close="true"
    :close-on-click-modal="false"
    class="advanced-filter-dialog"
  >
    <div class="advanced-filter-content">
      <div class="filter-row">
        <div class="filter-label">
          <span>包含词</span>
          <span class="filter-count">已设置{{ (tempIncludeWords.split(' ') || []).length }}/16</span>
        </div>
        <el-input v-model="tempIncludeWords" placeholder="请输入包含词，多个词用空格分隔" class="filter-input" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancelIncludeWords">取消</el-button>
        <el-button type="primary" @click="handleConfirmIncludeWords">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 排除词弹窗 -->
  <el-dialog
    v-model="showExcludeWordsDialog"
    title="排除词设置"
    width="480px"
    :show-close="true"
    :close-on-click-modal="false"
    class="advanced-filter-dialog"
  >
    <div class="advanced-filter-content">
      <div class="filter-row">
        <div class="filter-label">
          <span>排除词</span>
          <span class="filter-count">已设置{{ (tempExcludeWords.split(' ') || []).length }}/16</span>
        </div>
        <el-input v-model="tempExcludeWords" placeholder="请输入排除词，多个词用空格分隔" class="filter-input" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancelExcludeWords">取消</el-button>
        <el-button type="primary" @click="handleConfirmExcludeWords">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { ArrowDown, Edit, Plus, Close, Calendar, Star, Check } from '@element-plus/icons-vue';
import type { TabsPaneContext } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

// 控制是否显示订阅项目标签页
const hasSubscription = ref(false);
const activeName = ref('all');
const activeSubscriptionIndex = ref(-1);
const showAllAreas = ref(false);

// 当前选中的订阅项目
const currentSubscription = ref(null);

// 模拟订阅项目数据
const subscriptionProjects = ref([
  {
    id: 1,
    name: '订阅器1'
  }
]);

// 标讯类型（固定三种）
const bidTypes = ref(['不限', '招标公告', '采购意向', '中标结果']);

// 定义省份地区数组
const provinceAreas = ref([
  { id: '1', name: '全国', selected: true, selectedCnt: 0 },
  { id: '2', name: '北京市', selected: false, selectedCnt: 0 },
  { id: '3', name: '天津市', selected: false, selectedCnt: 0 },
  { id: '4', name: '河北省', selected: false, selectedCnt: 0 },
  { id: '5', name: '山西省', selected: false, selectedCnt: 0 },
  { id: '6', name: '内蒙古自治区', selected: false, selectedCnt: 0 },
  { id: '7', name: '辽宁省', selected: false, selectedCnt: 0 },
  { id: '8', name: '吉林省', selected: false, selectedCnt: 0 },
  { id: '9', name: '黑龙江省', selected: false, selectedCnt: 0 },
  { id: '10', name: '上海市', selected: false, selectedCnt: 0 },
  { id: '11', name: '江苏省', selected: false, selectedCnt: 0 },
  { id: '12', name: '浙江省', selected: false, selectedCnt: 0 },
  { id: '13', name: '安徽省', selected: false, selectedCnt: 0 },
  { id: '14', name: '福建省', selected: false, selectedCnt: 0 },
  { id: '15', name: '江西省', selected: false, selectedCnt: 0 },
  { id: '16', name: '山东省', selected: false, selectedCnt: 0 },
  { id: '17', name: '河南省', selected: false, selectedCnt: 0 },
  { id: '18', name: '湖北省', selected: false, selectedCnt: 0 },
  { id: '19', name: '湖南省', selected: false, selectedCnt: 0 },
  { id: '20', name: '广东省', selected: false, selectedCnt: 0 },
  { id: '21', name: '广西壮族自治区', selected: false, selectedCnt: 0 },
  { id: '22', name: '海南省', selected: false, selectedCnt: 0 },
  { id: '23', name: '重庆市', selected: false, selectedCnt: 0 },
  { id: '24', name: '四川省', selected: false, selectedCnt: 0 },
  { id: '25', name: '贵州省', selected: false, selectedCnt: 0 },
  { id: '26', name: '云南省', selected: false, selectedCnt: 0 },
  { id: '27', name: '西藏自治区', selected: false, selectedCnt: 0 },
  { id: '28', name: '陕西省', selected: false, selectedCnt: 0 },
  { id: '29', name: '甘肃省', selected: false, selectedCnt: 0 },
  { id: '30', name: '青海省', selected: false, selectedCnt: 0 },
  { id: '31', name: '宁夏回族自治区', selected: false, selectedCnt: 0 },
  { id: '32', name: '新疆维吾尔自治区', selected: false, selectedCnt: 0 },
  { id: '33', name: '香港特别行政区', selected: false, selectedCnt: 0 },
  { id: '34', name: '澳门特别行政区', selected: false, selectedCnt: 0 },
  { id: '35', name: '台湾省', selected: false, selectedCnt: 0 }
]);

// 存储选中的标讯类型，默认选中不限
const selectedBidTypes = ref(['不限']);

// 自定义时间选择相关
const showDatePicker = ref(false);
const customDateRange = ref([]);
const showIncludeWordsDialog = ref(false);
const showExcludeWordsDialog = ref(false);
const tempIncludeWords = ref('');
const tempExcludeWords = ref('');
const advancedFilter = ref({
  includeWords: '',
  excludeWords: ''
});

// 发布时间选项
const publishTimeOptions = ['不限', '近3天', '近7天', '近1个月', '近3个月', '近6个月', '近1年', '近3年'];
const selectedPublishTime = ref('不限');

// 标讯列表数据
const bidList = ref([
  {
    'id': '961e8217d5ec8077590eb54fe664bdfa',
    'title': '建湖县2024年稻麦绿色高质高效创建（新型肥料）采购项目采购公告',
    'md5Id': '961e8217d5ec8077590eb54fe664bdfa',
    'publishTime': '32分钟前',
    'publishDate': '2025-03-19 16:35:21',
    'province': '江苏省',
    'city': '盐城市',
    'region': null,
    'bidUnit': {
      'id': '9aaa8157ee5c49a0990e8b8ece2cb897',
      'name': '建湖县农业技术综合服务中心',
      'units': [
        {
          'id': '9aaa8157ee5c49a0990e8b8ece2cb897',
          'name': '建湖县农业技术综合服务中心',
          'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/9aaa8157ee5c49a0990e8b8ece2cb897.jpg',
          'nameAlias': '建湖县农',
          'isClick': true
        }
      ],
      'contactInfo': []
    },
    'winBidUnit': null,
    'winBidAmount': '',
    'budgetAmount': '',
    'tenderProducts': '新型肥料',
    'bidType': '招标公告',
    'subBidType': '招标',
    'background': '#2680E1',
    'bidEndDate': '2025-04-09',
    'bidRemainingDays': 21,
    'isFollow': false,
    'isSchedule': false,
    'isRead': false,
    'bidTimesThisYear': null,
    'predictionDate': null,
    'source': '',
    'time': null,
    'mainBody':
      '项目概况 建湖县2024年稻麦绿色高质高效创建（新型肥料）采购项目 JSZC-320925-JSTX-G2025-0007 招标项目的潜在投标人应在苏采云系统 获取招标文件，并',
    'preBidDate': null,
    'tags': [
      {
        'name': '有附件',
        'backColor': '#E0F9E6',
        'fontColor': '#00AD36'
      },
      {
        'name': '21天后投标截止',
        'backColor': 'rgba(254, 78, 73, 0.10)',
        'fontColor': '#FE4E49'
      }
    ],
    'clue': null
  },
  {
    'id': 'ffa7b429de7db5accf40fe4b9bb6bd15',
    'title': '关于电脑耳机/耳麦的网上超市合同公告',
    'md5Id': 'ffa7b429de7db5accf40fe4b9bb6bd15',
    'publishTime': '32分钟前',
    'publishDate': '2025-03-19 16:35:17',
    'province': '安徽省',
    'city': '合肥市',
    'region': null,
    'bidUnit': {
      'id': '49cf035be9e80d151fe763236b0121c9-old',
      'name': '合肥师范附小教育集团长丰分校',
      'units': [
        {
          'id': '49cf035be9e80d151fe763236b0121c9-old',
          'name': '合肥师范附小教育集团长丰分校',
          'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/49cf035be9e80d151fe763236b0121c9-old.jpg',
          'nameAlias': '合肥师范',
          'isClick': false
        }
      ],
      'contactInfo': []
    },
    'winBidUnit': {
      'id': '83b23704b3ae8ffdcce8381ae776d5f2',
      'name': '合肥市红猴电子科技有限公司',
      'units': [
        {
          'id': '83b23704b3ae8ffdcce8381ae776d5f2',
          'name': '合肥市红猴电子科技有限公司',
          'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/83b23704b3ae8ffdcce8381ae776d5f2.jpg',
          'nameAlias': '合肥市红',
          'isClick': true
        }
      ],
      'contactInfo': []
    },
    'winBidAmount': '690元',
    'budgetAmount': '',
    'tenderProducts': '电脑耳机/耳麦',
    'bidType': '中标结果',
    'subBidType': '中标',
    'background': '#FF7B1C',
    'bidEndDate': null,
    'bidRemainingDays': null,
    'isFollow': false,
    'isSchedule': false,
    'isRead': false,
    'bidTimesThisYear': null,
    'predictionDate': null,
    'source': '',
    'time': null,
    'mainBody':
      '一、合同编号：34012120250319000016 二、合同名称：关于电脑耳机/耳麦的网上超市合同 三、项目编号：2221451000000777690 四、项目名称：合肥师范附小教育集团长丰分校网',
    'preBidDate': null,
    'tags': [
      {
        'name': '有附件',
        'backColor': '#E0F9E6',
        'fontColor': '#00AD36'
      }
    ],
    'clue': null
  },
  {
    'id': 'ad9faca5c1c2842f433df45e94d430da',
    'title': '上海市市场监督管理局2025年质量监督抽查（儿童及婴幼儿服装、定配眼镜等）项目的合同公告',
    'md5Id': 'ad9faca5c1c2842f433df45e94d430da',
    'publishTime': '50分钟前',
    'publishDate': '2025-03-19 18:36:57',
    'province': '上海市',
    'city': '上海市',
    'region': null,
    'bidUnit': {
      'id': '82327db236184645b30d9f33b11baa31',
      'name': '上海市市场监督管理局',
      'units': [
        {
          'id': '82327db236184645b30d9f33b11baa31',
          'name': '上海市市场监督管理局',
          'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/82327db236184645b30d9f33b11baa31.jpg',
          'nameAlias': '上海市市',
          'isClick': true
        }
      ],
      'contactInfo': []
    },
    'winBidUnit': {
      'id': '2aa96c9166dea4f6003d0a9efd873f8a',
      'name': '上海天伟标准技术服务有限公司',
      'units': [
        {
          'id': '2aa96c9166dea4f6003d0a9efd873f8a',
          'name': '上海天伟标准技术服务有限公司',
          'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/2aa96c9166dea4f6003d0a9efd873f8a.jpg',
          'nameAlias': '上海天伟',
          'isClick': true
        }
      ],
      'contactInfo': []
    },
    'winBidAmount': '19万元',
    'budgetAmount': '',
    'tenderProducts': '儿童及婴幼儿服装,定配眼镜',
    'bidType': '中标结果',
    'subBidType': '中标',
    'background': '#FF7B1C',
    'bidEndDate': null,
    'bidRemainingDays': null,
    'isFollow': false,
    'isSchedule': false,
    'isRead': false,
    'bidTimesThisYear': null,
    'predictionDate': null,
    'source': '',
    'time': '2025-03-19 19:26:00',
    'mainBody':
      '一、合同编号：11NMB2F3067X20251003 二、合同名称：上海市市场监督管理局2025年质量监督抽查（儿童及婴幼儿服装、定配眼镜等）项目的合同 三、项目编号',
    'preBidDate': null,
    'tags': [
      {
        'name': '有附件',
        'backColor': '#E0F9E6',
        'fontColor': '#00AD36'
      }
    ],
    'clue': null
  },
  {
    'id': '2d7450ab279f9f222e1cfa30baede7d9',
    'title': 'LTO化学气相沉积设备采购项目第二次招标公告',
    'md5Id': '2d7450ab279f9f222e1cfa30baede7d9',
    'publishTime': '1小时前',
    'publishDate': '2025-03-19 18:26:01',
    'province': '上海市',
    'city': '上海市',
    'region': null,
    'bidUnit': {
      'id': 'a6097d27c540470bdaa8bed3225da9e6',
      'name': '上海新昇半导体科技有限公司',
      'units': [
        {
          'id': 'a6097d27c540470bdaa8bed3225da9e6',
          'name': '上海新昇半导体科技有限公司',
          'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/a6097d27c540470bdaa8bed3225da9e6.jpg',
          'nameAlias': '上海新昇',
          'isClick': true
        }
      ],
      'contactInfo': []
    },
    'winBidUnit': null,
    'winBidAmount': '',
    'budgetAmount': '',
    'tenderProducts': 'LTO化学气相沉积设备',
    'bidType': '招标公告',
    'subBidType': '招标',
    'background': '#2680E1',
    'bidEndDate': '2025-04-09',
    'bidRemainingDays': 21,
    'isFollow': false,
    'isSchedule': false,
    'isRead': false,
    'bidTimesThisYear': null,
    'predictionDate': null,
    'source': '',
    'time': '2025-03-19 19:26:00',
    'mainBody': '',
    'preBidDate': null,
    'tags': [
      {
        'name': '有附件',
        'backColor': '#E0F9E6',
        'fontColor': '#00AD36'
      },
      {
        'name': '21天后投标截止',
        'backColor': 'rgba(254, 78, 73, 0.10)',
        'fontColor': '#FE4E49'
      },
      {
        'name': '7天后获取标书截止',
        'backColor': 'rgba(254, 78, 73, 0.10)',
        'fontColor': '#FE4E49'
      }
    ],
    'clue': null
  }
]);

// 是否需要显示更多按钮
const needShowMore = computed(() => {
  const areaContent = document.querySelector('.filter-content');
  if (!areaContent) return false;
  return areaContent.scrollHeight > areaContent.clientHeight;
});

// 处理标签页点击
const handleClick = (tab: TabsPaneContext) => {
  if (tab.paneName === 'all') {
    // 切换到全部标讯时，重置省份选择状态并显示所有省份
    provinceAreas.value.forEach((p) => {
      p.selected = p.name === '全国';
      p.selectedCnt = 0;
    });
    showAllAreas.value = true;
  } else if (tab.paneName === 'subscription') {
    showAllAreas.value = false;
  }
};

// 处理编辑点击
const handleEditClick = (item:any) => {
  console.log('Edit clicked', item);
};

// 处理添加卡片点击
const handleCardClickAdd = () => {
  console.log('Add card clicked');
};

// 处理订阅项目点击
const handleSubscriptionClick = async (subscription, index) => {
  activeSubscriptionIndex.value = index;
  currentSubscription.value = subscription;
  // 获取该订阅器的省份信息
  await fetchSubscriptionAreas(subscription.id);
};

// 获取订阅器的省份信息
const fetchSubscriptionAreas = async (subscriptionId) => {
  // 这里替换为实际的接口调用
  const response = await new Promise<Array<any>>((resolve) => {
    setTimeout(() => {
      resolve([
        { id: '1', name: '全国', selected: false, selectedCnt: 0 },
        { id: '2', name: '北京市', selected: true, selectedCnt: 2 },
        { id: '3', name: '天津市', selected: false, selectedCnt: 0 }
      ]);
    }, 0);
  });
  // 只在订阅项目页面更新省份数据
  if (activeName.value === 'subscription') {
    provinceAreas.value = response;
  }
};

// 处理省份点击
const handleProvinceClick = (province) => {
  if (activeName.value === 'subscription') {
    // 订阅项目页面的逻辑保持不变
    if (province.name === '全国') {
      provinceAreas.value.forEach((p) => {
        p.selected = p.name === '全国' ? !p.selected : false;
        p.selectedCnt = 0;
      });
    } else {
      const hasNational = provinceAreas.value.find((p) => p.name === '全国' && p.selected);
      if (hasNational) {
        provinceAreas.value.find((p) => p.name === '全国').selected = false;
      }
      province.selected = !province.selected;
    }
  } else {
    // 全部标讯页面的逻辑
    if (province.name === '全国') {
      provinceAreas.value.forEach((p) => {
        p.selected = p.name === '全国';
        p.selectedCnt = 0;
      });
    } else {
      provinceAreas.value.forEach((p) => {
        if (p.name === '全国') {
          p.selected = false;
        }
      });
      province.selected = !province.selected;
    }
  }
};

// 切换标讯类型选择
const toggleBidTypeSelection = (option) => {
  if (option === '不限') {
    // 如果点击的是不限，清空其他选项
    selectedBidTypes.value = selectedBidTypes.value.includes('不限') ? [] : ['不限'];
  } else {
    // 如果点击的是其他选项，先检查是否有不限被选中
    if (selectedBidTypes.value.includes('不限')) {
      selectedBidTypes.value = [];
    }
    const index = selectedBidTypes.value.indexOf(option);
    if (index > -1) {
      selectedBidTypes.value.splice(index, 1);
    } else {
      selectedBidTypes.value.push(option);
    }
  }
};

// 检查标讯类型是否被选中
const isBidTypeSelected = (option) => {
  return selectedBidTypes.value.includes(option);
};

// 切换显示全部区域
const toggleShowAllAreas = () => {
  showAllAreas.value = !showAllAreas.value;
};

// 处理发布时间选择
const handlePublishTimeSelect = (time) => {
  selectedPublishTime.value = time;
};

// 检查是否有订阅项目并设置默认值
const checkSubscription = () => {
  hasSubscription.value = subscriptionProjects.value.length > 0;
  if (hasSubscription.value) {
    activeName.value = 'subscription';
    activeSubscriptionIndex.value = 0;
    currentSubscription.value = subscriptionProjects.value[0];
    // 获取默认选中订阅器的省份信息
    fetchSubscriptionAreas(subscriptionProjects.value[0].id);
  }
};

// 页面加载时检查订阅状态
checkSubscription();

// 总数
const total = ref(320);

// 处理标讯项点击
const handleBidItemClick = (row: any) => {
  const url = router.resolve({
    path: '/dashboard/nationalStandardDetail',
    query: {
      id: row.id
    }
  });
  window.open(url.href, '_blank');
};

// 处理日程点击
const handleScheduleClick = (item) => {
  item.isSchedule = !item.isSchedule;
  console.log('Schedule clicked', item);
};

// 处理收藏点击
const handleFollowClick = (item) => {
  item.isFollow = !item.isFollow;
  console.log('Follow clicked', item);
};

// 处理自定义时间选择
const handleConfirmDate = () => {
  if (customDateRange.value && customDateRange.value.length === 2) {
    selectedPublishTime.value = 'custom';
  }
  showDatePicker.value = false;
};

const handleCancelDate = () => {
  if (selectedPublishTime.value === 'custom') {
    customDateRange.value = [];
  }
  showDatePicker.value = false;
};

// 监听弹窗打开，初始化临时变量
watch(showIncludeWordsDialog, (newVal) => {
  if (newVal) {
    tempIncludeWords.value = advancedFilter.value.includeWords;
  }
});

watch(showExcludeWordsDialog, (newVal) => {
  if (newVal) {
    tempExcludeWords.value = advancedFilter.value.excludeWords;
  }
});

// 处理包含词弹窗确认
const handleConfirmIncludeWords = () => {
  advancedFilter.value.includeWords = tempIncludeWords.value;
  showIncludeWordsDialog.value = false;
};

// 处理包含词弹窗取消
const handleCancelIncludeWords = () => {
  tempIncludeWords.value = advancedFilter.value.includeWords;
  showIncludeWordsDialog.value = false;
};

// 处理排除词弹窗确认
const handleConfirmExcludeWords = () => {
  advancedFilter.value.excludeWords = tempExcludeWords.value;
  showExcludeWordsDialog.value = false;
};

// 处理排除词弹窗取消
const handleCancelExcludeWords = () => {
  tempExcludeWords.value = advancedFilter.value.excludeWords;
  showExcludeWordsDialog.value = false;
};

// 处理日期范围变化
const handleDateRangeChange = (dates) => {
  if (dates && dates.length === 2) {
    selectedPublishTime.value = 'custom';
  } else {
    selectedPublishTime.value = '不限';
  }
};

// 组织类型选项
const orgTypes = ref([
  '不限',
  '个体工商户',
  '普通合伙',
  '有限合伙',
  '联营企业',
  '集体所有制',
  '国有企业',
  '外商投资企业',
  '港、澳、台商投资企业',
  '独资企业'
]);

// 选中的组织类型
const selectedOrgTypes = ref(['不限']);

// 更多筛选相关的状态
const showEmployeeOptions = ref(false);
const showEstablishOptions = ref(false);
const showStatusOptions = ref(false);
const showRegCapitalOptions = ref(false);
const showPaidCapitalOptions = ref(false);
const showBidStageOptions = ref(false);
const showMatchingModeOptions = ref(false);
const showBidAmountOptions = ref(false);

// 参保人数相关
const selectedEmployeeOption = ref('不限');
const employeeOptions = ref(['不限', '小于50人', '50-99人', '100-499人', '500人以上']);

// 成立年限相关
const selectedEstablishOption = ref('不限');
const establishOptions = ref(['不限', '3个月内', '半年内', '1年内', '1-3年', '3-5年', '5-10年', '10年以上']);

// 登记状态相关
const selectedStatusOption = ref('不限');
const statusOptions = ref(['不限', '存续', '在业', '吊销', '注销', '迁入', '迁出']);

// 注册资本相关
const selectedRegCapitalOption = ref('不限');
const regCapitalOptions = ref(['不限', '100万以下', '100-200万', '200-500万', '500-1000万', '1000-5000万', '5000万以上']);

// 实缴资本相关
const selectedPaidCapitalOption = ref('不限');
const paidCapitalOptions = ref(['不限', '100万以下', '100-200万', '200-500万', '500-1000万', '1000-5000万', '5000万以上']);

// 招标阶段相关
const selectedBidStageOption = ref('不限');
const bidStageOptions = ref(['不限', '预告', '招标', '变更', '答疑']);

// 匹配方式相关
const selectedMatchingModeOption = ref('不限');
const matchingModeOptions = ref(['不限', '精确', '模糊', '智能']);

// 中标金额相关
const selectedBidAmountOption = ref('不限');
const bidAmountOptions = ref(['不限', '100万以下', '100-500万', '500-1000万', '1000-5000万', '5000万以上']);

// 关闭所有下拉框
const closeAllDropdowns = (except?: string) => {
  if (except !== 'employee') showEmployeeOptions.value = false;
  if (except !== 'establish') showEstablishOptions.value = false;
  if (except !== 'status') showStatusOptions.value = false;
  if (except !== 'regCapital') showRegCapitalOptions.value = false;
  if (except !== 'paidCapital') showPaidCapitalOptions.value = false;
  if (except !== 'bidStage') showBidStageOptions.value = false;
  if (except !== 'matchingMode') showMatchingModeOptions.value = false;
  if (except !== 'bidAmount') showBidAmountOptions.value = false;
};

// 处理下拉框点击
const handleDropdownClick = (type: string) => {
  closeAllDropdowns(type);
  switch (type) {
    case 'employee':
      showEmployeeOptions.value = !showEmployeeOptions.value;
      break;
    case 'establish':
      showEstablishOptions.value = !showEstablishOptions.value;
      break;
    case 'status':
      showStatusOptions.value = !showStatusOptions.value;
      break;
    case 'regCapital':
      showRegCapitalOptions.value = !showRegCapitalOptions.value;
      break;
    case 'paidCapital':
      showPaidCapitalOptions.value = !showPaidCapitalOptions.value;
      break;
    case 'bidStage':
      showBidStageOptions.value = !showBidStageOptions.value;
      break;
    case 'matchingMode':
      showMatchingModeOptions.value = !showMatchingModeOptions.value;
      break;
    case 'bidAmount':
      showBidAmountOptions.value = !showBidAmountOptions.value;
      break;
  }
};

// 点击其他地方关闭下拉框
onMounted(() => {
  document.addEventListener('click', () => {
    closeAllDropdowns();
  });
});

// 处理选项点击事件
const onEmployeeClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('employee');
};

const onEmployeeOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedEmployeeOption.value = option;
  showEmployeeOptions.value = false;
};

const onEstablishClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('establish');
};

const onEstablishOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedEstablishOption.value = option;
  showEstablishOptions.value = false;
};

const onStatusClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('status');
};

const onStatusOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedStatusOption.value = option;
  showStatusOptions.value = false;
};

const onRegCapitalClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('regCapital');
};

const onRegCapitalOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedRegCapitalOption.value = option;
  showRegCapitalOptions.value = false;
};

const onPaidCapitalClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('paidCapital');
};

const onPaidCapitalOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedPaidCapitalOption.value = option;
  showPaidCapitalOptions.value = false;
};

const onBidStageClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('bidStage');
};

const onBidStageOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedBidStageOption.value = option;
  showBidStageOptions.value = false;
};

const onMatchingModeClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('matchingMode');
};

const onMatchingModeOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedMatchingModeOption.value = option;
  showMatchingModeOptions.value = false;
};

const onBidAmountClick = (event: MouseEvent) => {
  event.preventDefault();
  event.stopPropagation();
  handleDropdownClick('bidAmount');
};

const onBidAmountOptionClick = (option: string) => {
  event.preventDefault();
  event.stopPropagation();
  selectedBidAmountOption.value = option;
  showBidAmountOptions.value = false;
};

// 处理组织类型选择
const toggleOrgTypeSelection = (type) => {
  if (type === '不限') {
    selectedOrgTypes.value = selectedOrgTypes.value.includes('不限') ? [] : ['不限'];
  } else {
    if (selectedOrgTypes.value.includes('不限')) {
      selectedOrgTypes.value = [];
    }
    const index = selectedOrgTypes.value.indexOf(type);
    if (index > -1) {
      selectedOrgTypes.value.splice(index, 1);
    } else {
      selectedOrgTypes.value.push(type);
    }
  }
};
</script>

<style lang="scss" scoped>
/* 页面容器 */
.national-standard-container {
  background: var(--ai-bg-primary);
  color: var(--ai-text-primary);
  padding: 24px;
}

/* 标签页样式 */
:deep(.demo-tabs) {
  background: var(--ai-bg-card);
  border-radius: var(--ai-radius-lg);
  border: 1px solid var(--ai-border);
  box-shadow: var(--ai-shadow-md);
  overflow: hidden;
  
  .el-tabs__header {
    background: var(--ai-bg-overlay);
    border-bottom: 1px solid var(--ai-border-light);
    margin: 0;
    padding: 0 24px;
  }
  
  .el-tabs__nav-wrap {
    padding: 0;
  }
  
  .el-tabs__item {
    color: var(--ai-text-secondary);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 24px;
    transition: var(--ai-transition);
    border-bottom: 2px solid transparent;
    
    &:hover {
      color: var(--ai-primary);
      background: var(--ai-bg-overlay);
    }
    
    &.is-active {
      color: var(--ai-primary);
      background: var(--ai-bg-card);
      border-bottom-color: var(--ai-primary);
    }
  }
  
  .el-tabs__active-bar {
    background: var(--ai-gradient-primary);
    height: 3px;
  }
  
  .el-tabs__content {
    padding: 24px;
  }
}

/* 活动轮播区域 */
.activity-ticker {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding: 8px 0;
  
  &::-webkit-scrollbar {
    height: 4px;
  }
  
  &::-webkit-scrollbar-track {
    background: var(--ai-bg-overlay);
    border-radius: 2px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--ai-border-light);
    border-radius: 2px;
    
    &:hover {
      background: var(--ai-border);
    }
  }
}

/* 小卡片样式 */
.small-cards {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--ai-bg-glass);
  border: 1px solid var(--ai-border-light);
  border-radius: var(--ai-radius-lg);
  cursor: pointer;
  transition: var(--ai-transition);
  white-space: nowrap;
  min-width: 120px;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--ai-shadow-md);
    border-color: var(--ai-primary-light);
  }
  
  &.small-cards-active {
    background: var(--ai-gradient-subtle);
    border-color: var(--ai-primary);
    color: var(--ai-primary);
    box-shadow: var(--ai-shadow-md);
  }
  
  .small-cards_name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ai-text-secondary);
  }
  
  .el-icon {
    font-size: 16px;
    color: var(--ai-text-tertiary);
    transition: var(--ai-transition);
    
    &:hover {
      color: var(--ai-primary);
    }
  }
}

/* 订阅按钮 */
.subscribe-now {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--ai-gradient-primary);
  color: white;
  border-radius: var(--ai-radius-lg);
  cursor: pointer;
  transition: var(--ai-transition);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--ai-shadow-md);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--ai-shadow-lg);
  }
  
  .el-icon {
    font-size: 16px;
  }
}

/* 搜索区域 */
.search-class {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  
  .input-with-select {
    :deep(.el-input__wrapper) {
      background: var(--ai-bg-card);
      border: 1px solid var(--ai-border);
      border-radius: var(--ai-radius-lg);
      box-shadow: var(--ai-shadow-sm);
      
      &:hover {
        border-color: var(--ai-primary-light);
        box-shadow: var(--ai-shadow-md);
      }
      
      &.is-focus {
        border-color: var(--ai-primary);
        box-shadow: var(--ai-shadow-lg);
      }
    }
    
    :deep(.el-input__inner) {
      color: var(--ai-text-primary);
      
      &::placeholder {
        color: var(--ai-text-tertiary);
      }
    }
    
    :deep(.el-button) {
      background: var(--ai-gradient-primary);
      border: none;
      color: white;
      border-radius: 0 var(--ai-radius-lg) var(--ai-radius-lg) 0;
      font-weight: 500;
      transition: var(--ai-transition);
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: var(--ai-shadow-md);
      }
    }
  }
}

/* 筛选区域 */
.subscribe-filter {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--ai-bg-overlay);
  border-radius: var(--ai-radius-lg);
  border: 1px solid var(--ai-border-light);
}

.filter-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-title {
  color: var(--ai-text-secondary);
  font-size: 14px;
  font-weight: 500;
  margin-right: 20px;
  margin-top: 4px;
  min-width: 80px;
  flex-shrink: 0;
}

.filter-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
  position: relative;
}

.area-selector {
  flex: 1;
}

/* 文本选项样式 */
.text-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ai-bg-card);
  border: 1px solid var(--ai-border-light);
  border-radius: var(--ai-radius-md);
  cursor: pointer;
  transition: var(--ai-transition);
  font-size: 14px;
  font-weight: 400;
  color: var(--ai-text-secondary);
  white-space: nowrap;
  
  &:hover {
    border-color: var(--ai-primary-light);
    color: var(--ai-primary);
    transform: translateY(-1px);
    box-shadow: var(--ai-shadow-sm);
  }
  
  &.active {
    background: var(--ai-gradient-primary);
    border-color: var(--ai-primary);
    color: white;
    font-weight: 500;
    box-shadow: var(--ai-shadow-md);
  }
  
  .text {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 显示更多按钮 */
.show-more {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ai-primary);
  cursor: pointer;
  padding: 8px 16px;
  background: var(--ai-bg-card);
  border: 1px solid var(--ai-border-light);
  border-radius: var(--ai-radius-md);
  font-size: 14px;
  font-weight: 500;
  transition: var(--ai-transition);
  
  &:hover {
    background: var(--ai-bg-overlay);
    border-color: var(--ai-primary-light);
    transform: translateY(-1px);
  }
  
  .el-icon {
    font-size: 12px;
  }
}

/* 计数标签 */
.count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ai-text-tertiary);
  
  .el-icon {
    font-size: 12px;
    cursor: pointer;
    
    &:hover {
      color: var(--ai-danger);
    }
  }
}

/* 卡片样式 */
.card-bottom {
  margin-top: 24px;
}

.card-header {
  font-size: 18px;
  font-weight: 600;
  color: var(--ai-text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ai-border-light);
}

/* 标书列表 */
.bid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.bid-item {
  background: var(--ai-bg-card);
  border-radius: var(--ai-radius-lg);
  border: 1px solid var(--ai-border-light);
  box-shadow: var(--ai-shadow-md);
  padding: 24px;
  transition: var(--ai-transition);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--ai-shadow-lg);
    border-color: var(--ai-primary-light);
  }
}

.bid-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ai-text-primary);
  margin-bottom: 16px;
  line-height: 1.4;
}

.bid-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ai-border-light);
}

.action-icon {
  cursor: pointer;
  transition: var(--ai-transition);
  color: var(--ai-text-tertiary);
  
  &:hover {
    color: var(--ai-primary);
    transform: scale(1.1);
  }
  
  &.active {
    color: var(--ai-primary);
  }
}

.bid-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tag {
  padding: 4px 12px;
  background: var(--ai-bg-overlay);
  border-radius: var(--ai-radius-sm);
  font-size: 12px;
  color: var(--ai-text-secondary);
  border: 1px solid var(--ai-border-light);
}

.bid-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ai-text-secondary);
}

.value {
  font-size: 14px;
  font-weight: 400;
  color: var(--ai-text-primary);
}

.publish-time {
  font-size: 12px;
  font-weight: 400;
  color: var(--ai-text-tertiary);
}

.content-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 筛选下拉菜单 */
.filter-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ai-bg-card);
  min-width: 200px;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  box-shadow: var(--ai-shadow-lg);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-option {
  color: var(--ai-text-secondary);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: var(--ai-transition);
  border-bottom: 1px solid var(--ai-border-light);
  
  &:hover {
    background: var(--ai-bg-overlay);
    color: var(--ai-primary);
  }
  
  &:last-child {
    border-bottom: none;
  }
}

/* 高级筛选弹窗 */
.advanced-filter-dialog {
  background: var(--ai-bg-card);
  border-radius: var(--ai-radius-lg);
  border: 1px solid var(--ai-border);
  box-shadow: var(--ai-shadow-xl);
  padding: 24px;
}

.advanced-filter-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.filter-label {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--ai-text-primary);
}

.filter-input {
  flex: 2;
  padding: 12px 16px;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  background: var(--ai-bg-card);
  color: var(--ai-text-primary);
  transition: var(--ai-transition);
  
  &:hover {
    border-color: var(--ai-primary-light);
    box-shadow: var(--ai-shadow-sm);
  }
  
  &:focus {
    border-color: var(--ai-primary);
    box-shadow: var(--ai-shadow-md);
    outline: none;
  }
}

.filter-tag {
  font-size: 12px;
  font-weight: 400;
  color: var(--ai-text-secondary);
  background: var(--ai-bg-subtle);
  padding: 6px 12px;
  border-radius: var(--ai-radius-sm);
  margin-left: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ai-border-light);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .bid-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .national-standard-container {
    padding: 16px;
  }
  
  .search-class .input-with-select {
    width: 100% !important;
  }
  
  .filter-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .filter-title {
    margin-right: 0;
    margin-bottom: 8px;
  }
  
  .bid-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .bid-item {
    padding: 16px;
  }
  
  .subscribe-filter {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  :deep(.demo-tabs) {
    .el-tabs__content {
      padding: 16px;
    }
    
    .el-tabs__item {
      padding: 12px 16px;
      font-size: 14px;
    }
  }
  
  .small-cards {
    padding: 8px 12px;
    min-width: 100px;
    
    .small-cards_name {
      font-size: 12px;
    }
  }
  
  .subscribe-now {
    padding: 8px 12px;
    font-size: 12px;
  }
}
</style>